<!--当前页js-->
<script src="<{:STATICS}>/centaurus/js/jquery.slimscroll.min.js"></script> 
<script src="<{:STATICS}>/centaurus/js/jquery.countTo.js"></script> 

<layout name='layout_page' />
<div class="row">
	<div class="col-lg-12">
		<div class="row">
			<div class="col-lg-12">
				<ol class="breadcrumb">
					<li><a href="<{:U('Index/index')}>">Home</a></li>
					<li class="active"><span>Dashboard</span></li>
				</ol>
				<h1>Dashboard</h1>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-3 col-sm-6 col-xs-12">
			    <a href="<{:U('Request/index')}>">
				<div class="main-box infographic-box"> <i class="fa fa-user red-bg"></i> <span class="headline">My Mentors</span> <span class="value"> <span class="timer" data-from="0" data-to="<{$userInfo.mentors}>" data-speed="1000" data-refresh-interval="50"> <{$userInfo.mentors}> </span> </span> </div>
				</a>
			</div>
			<div class="col-lg-3 col-sm-6 col-xs-12">
				<a href="<{:U('Mentors/lists')}>">
				<div class="main-box infographic-box"> <i class="fa fa-book emerald-bg"></i> <span class="headline">Project</span> <span class="value"> <span class="timer" data-from="0" data-to="<{$userInfo.project}>" data-speed="800" data-refresh-interval="30"> <{$userInfo.project}> </span> </span> </div>
				</a>
			</div>
			<div class="col-lg-3 col-sm-6 col-xs-12">
				<a href="<{:U('Appointment/index')}>">
				<div class="main-box infographic-box"> <i class="fa fa-bell-o green-bg"></i> <span class="headline">Appointment</span> <span class="value"><span class="timer" data-from="0" data-to="<{$userInfo.appointment}>" data-speed="900" data-refresh-interval="60"> <{$userInfo.appointment}> </span> </span> </div>
				</a>
			</div>
			<div class="col-lg-3 col-sm-6 col-xs-12">
				<a href="<{:U('Message/index')}>">
				<div class="main-box infographic-box"> <i class="fa fa-envelope-o yellow-bg"></i> <span class="headline">Message</span> <span class="value"> <span class="timer" data-from="0" data-to="<{$userInfo.message}>" data-speed="1100"> <{$userInfo.message}> </span> </span> </div>
				</a>
			</div>
		</div>


		<div class="row">
			<div class="col-lg-12">
				<div class="main-box clearfix">
					<header class="main-box-header clearfix">
						<h2 class="pull-left">System message</h2>
						<div class="filter-block pull-right">
							<a href="<{:U('Message/system')}>" class="btn btn-primary pull-right"> <i class="fa fa-eye fa-lg"></i> View all </a> </div>
					</header>
					<div class="main-box-body clearfix">
						<div class="table-responsive clearfix">
							<table class="table table-hover">
								<thead>
									<tr>
										<th><span>Date</span></th>
										<th>Title</th>
										<th class="text-center"><span>Status</span></th>
										<th class="text-right">View</th>
									</tr>
								</thead>
								<tbody>
									<volist name="sysmsg" id="vo">
									<tr>
										<td><{$vo.createTime|date="F,d,Y H:i:s",###}></td>
										<td><a href="<{:U('Message/view',array('id'=>$vo['id']))}>"><{$vo.title}></a></td>
										<td class="text-center"><span class="label label-danger">New</span></td>
										<td class="text-right" style="width: 15%;"><a href="<{:U('Message/view',array('id'=>$vo['id']))}>" class="table-link"> <span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-search-plus fa-stack-1x fa-inverse"></i> </span> </a></td>
									</tr>
									</volist>
									
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-6">
				<div class="main-box clearfix">
					<header class="main-box-header clearfix">
						<h2>Conversation</h2>
					</header>
					<div class="main-box-body clearfix">
						<div class="conversation-wrapper">
							<div class="conversation-content">
								<div class="conversation-inner">
									<volist name="chat" id="vo">
									<div class="conversation-item item-left clearfix">
										<div class="conversation-user"> <img style="width: 50px; height: 50px;" src="<{$vo.fromFace|getface}>" /> </div>
										<div class="conversation-body">
											<div class="name"> <{$vo.fromName}></div>
											<div class="time hidden-xs"> <{$vo.createTime|date="F,d,Y H:i:s",###}></div>
											<div class="text"><{$vo.content}></div>
										</div>
									</div>
									</volist>
								</div>
							</div>
							<!-- <div class="conversation-new-message">
								<form>
									<div class="form-group">
										<textarea class="form-control" rows="2" placeholder="Enter your message..."></textarea>
									</div>
									<div class="clearfix">
										<button type="submit" class="btn btn-success pull-right">Send message</button>
									</div>
								</form>
							</div> -->
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-6">
				<div class="main-box clearfix">
					<div class="tabs-wrapper tabs-no-header">
						<ul class="nav nav-tabs">
							<li class="active"><a href="#tab-todo" data-toggle="tab">Todo</a></li>
						</ul>
						<div class="tab-content tab-content-body clearfix">	
							<div class="tab-pane fade in active" id="tab-todo">	
								<ul class="widget-todo">
									<volist name="todo" id="vo">
									<li class="clearfix">
										<div class="name">
											<label><{$vo.title}></label>		
										</div>
										<div class="actions"> <a href="<{$vo.link}>" class="table-link"><span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-search-plus fa-stack-1x fa-inverse"></i> </span> </a></div>
									</li>
									</volist>									
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>

<script>
$(document).ready(function() {
	
	/* initialize the external events
	-----------------------------------------------------------------*/

	$('#external-events div.external-event').each(function() {
	
		// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
		// it doesn't need to have a start or end
		var eventObject = {
			title: $.trim($(this).text()) // use the element's text as the event title
		};
		
		// store the Event Object in the DOM element so we can get to it later
		$(this).data('eventObject', eventObject);
		
		// make the event draggable using jQuery UI
		$(this).draggable({
			zIndex: 999,
			revert: true,      // will cause the event to go back to its
			revertDuration: 0  //  original position after the drag
		});
		
	});	
	
    $('.conversation-inner').slimScroll({
        height: '332px',
        alwaysVisible: false,
        railVisible: true,
        wheelStep: 5,
        allowPageScroll: false
    });		
    

	$('.infographic-box .value .timer').countTo({});
	
});
</script>